<template>
  <div>
    <div style="margin: 10px">
      <el-popover
        placement="top"
        width="300"
        v-model="visible">
        <p>确定要初始化套餐菜单？</p>
        <br>
        <el-checkbox v-model="isClear" style="font-size: 12px">清空租户菜单再初始化</el-checkbox>
        <p style="font-size: 10px;color: red;">该选项会导致该租户已分配的菜单权限将清空</p>
        <br>
        <br>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" :loading="initLoading" @click="initPackageFeaturesMenu">确定</el-button>
        </div>
        <el-button
          type="primary"
          size="mini"
          slot="reference"
        >初始化套餐菜单
        </el-button>
      </el-popover>
      <el-button
        style="margin: 10px"
        type="success"
        size="mini"
        @click="handleValueChange()"
      >显示本租户全部权限
      </el-button>
    </div>
    <el-container style="height: 80vh; border: 1px solid #eee">
      <el-aside width="300px" style="border:1px solid #eee;padding: 20px;">
        <div style="margin: 10px;">
          <div style="margin-bottom: 20px">
            <div class="yxt-flex-align-center">
              <div class="yxt-divider"></div>
              <span>套餐功能</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="dataAuthorizationTips"
                placement="right"
              >
                <el-icon class="el-icon-question"></el-icon>
              </el-tooltip>
            </div>
          </div>
          <!--    套餐功能内容      -->
          <div class="cardSelectForm">
            <div class="menu" v-for="(data, title) in packageFeaturesData" :key="title">
              <div class="title">
                {{ title }}
              </div>
              <el-row>
                <el-col :span="24" v-for="(item,index) in data" :key="index" class="package_features">
                  <div class="menu-item flex"
                       :class="{active: active === item.id}"
                       @click="handleValueChange(item.id)">
                    <div class="m-r-10">
                      <el-avatar shape="square" :size="34" fit="fill" :src="baseURL + item[fields.icon]"></el-avatar>
                    </div>
                    <div class="menu-info flex-1">
                      <div class="nr">{{ item[fields.name] }}</div>
                      <div class="content">{{ item[fields.content] }}</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div style="margin: 10px;">
          <div>
            <div style="margin-bottom: 20px">
              <div class="yxt-flex-align-center">
                <div class="yxt-divider"></div>
                <span>套餐授权菜单</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="menuAuthorizationTips"
                  placement="right"
                >
                  <el-icon class="el-icon-question"></el-icon>
                </el-tooltip>
              </div>
            </div>
            <el-tree
              class="flow-tree"
              ref="menuTree"
              :data="menuData"
              node-key="id"
              default-expand-all
              show-checkbox
              check-strictly
              :expand-on-click-node="false"
              :default-checked-keys="menuCheckedKeys"
              :check-on-click-node="false"
              empty-text="请先选择套餐功能"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <div class="yxt-flex-between">
                  <div :style="{width:((4-node.level)*18+100)+'px'}">{{ data.name }}</div>
                  <div>
                    <el-tag style="margin-left: 5px;"
                            v-for="(item,index) in data.menu_permission"
                            :key="index"
                            size="mini">
                      {{ item }}
                    </el-tag>
                  </div>
                </div>
              </span>

            </el-tree>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as api from './api'
import util from '@/libs/util'
import XEUtils from 'xe-utils'

export default {
  name: 'packageFeaturesMenu',
  props: {
    packageFeaturesMenuObj: {
      type: Object,
      default () {
        return {
          id: null,
          name: null,
          data_range: null
        }
      }
    }
  },
  data () {
    return {
      data: [],
      menuData: [],
      menuCheckedKeys: [],
      packageFeaturesData: [],
      fields: {
        name: 'name', // 名称
        content: 'description', // 内容描述字段
        required: 'is_required', // 必选字段
        icon: 'icon', // 图标字段
        group: 'category' // 分组字段
      },
      baseURL: util.baseURL(),
      dataAuthorizationTips: '当前租户拥有的套餐功能',
      menuAuthorizationTips: '当前套餐功能所拥有的菜单权限',
      active: null,
      visible: false,
      isClear: false,
      initLoading: false
    }
  },
  watch: {},
  methods: {
    initMenu () {
      api.getAllMenu().then(ret => {
        const data = ret.data.data || ret.data
        this.menuData = XEUtils.toArrayTree(JSON.parse(JSON.stringify(data)).map(val => {
          val.disabled = true
          return val
        }), { parentKey: 'parent', strict: false })
        console.log('menuData', this.menuData)
      })
    },
    pageRequest (query) {
      if (!query) {
        query = {}
      }
      query.limit = 999
      console.log(111, this.packageFeaturesMenuObj)
      query.client_id = this.packageFeaturesMenuObj.id
      api.getAllPackageFeatures(query).then(res => {
        this.packageFeaturesData = res.data.data.reduce((acc, item) => {
          const { ...rest } = item
          const group = item[this.fields.group]
          if (!acc[group]) {
            acc[group] = []
          }
          acc[group].push(rest)
          return acc
        }, {})
      })
    },
    // 初始化权限
    getClientAuthMenu () {
      const query = {}
      query.client_id = this.packageFeaturesMenuObj.id
      query.package_features_id = this.active
      api.getClientAuthMenu(query).then(res => {
        this.$refs.menuTree.setCheckedKeys(res.data.data)
      })
    },
    // 点击卡片
    handleValueChange (id) {
      this.active = this.active === id ? null : id
      // 更新菜单
      this.getClientAuthMenu()
    },
    // 初始化菜单
    initPackageFeaturesMenu () {
      this.initLoading = true
      api.initClientAuthMenu({ client_id: this.packageFeaturesMenuObj.id, is_clear: this.isClear }).then(res => {
        this.$message.success('初始化成功')
        this.visible = false
        this.initLoading = false
        this.isClear = false
      }).catch((reason) => {
        this.visible = false
        this.initLoading = false
        this.isClear = false
      })
    }
  },
  created () {
    this.initMenu()
    this.pageRequest()
    this.getClientAuthMenu()
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}

.dept-tree::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.dept-tree {
  height: 160px;
  overflow-y: scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.flow-tree {
  overflow: auto;
  flex: 1;

  margin: 10px;

  .el-tree-node {
    .el-tree-node__children {
      overflow: visible !important
    }
  }
}

.el-drawer__header {
  margin-bottom: 0;
}

.cardSelectForm {
  line-height: 1.3;

  .title {
    margin-bottom: 16px;
    font-size: 14px;
    color: #333;
    font-weight: 500;

    .content {
      color: #999;
      font-size: 11px;
      margin-left: 4px;
    }
  }

  .menu {
    margin: 0;
  }

  .menu-item {
    margin: 10px 0;
    padding: 0 16px;
    border-radius: 8px;
    background: #f9f9f9;
    width: 220px;
    border: 1px solid #f9f9f9;
    cursor: pointer;
    height: 80px;
    position: relative;
  }

  .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .menu-info {
    min-width: 0;
    flex: 1;

    .nr {
      font-weight: 400;
      color: #333;
      font-size: 14px;
    }

    .content {
      color: #999;
      font-size: 11px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .flex-1 {
    flex: 1;
  }

  .m-r-10 {
    margin-right: 10px;
  }

  .active {
    background: #f5f8ff;
    border: 1px solid #4073fa;
  }

  .disabled {
    cursor: not-allowed;
  }

  .is-required {
    position: absolute;
    background-color: #ff9959;
    color: #fff;
    top: 10px;
    right: 0;
    transform: translateY(-50%);
    padding: 1px 4px;
    border-radius: 4px;
  }
}

</style>
